<template>
  <div class="files-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item>
        <a @click="navigateToRoot">文件管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in breadcrumbPath" :key="index">
        <a @click="navigateToBreadcrumb(index)">{{ item.name }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <el-button type="primary" :icon="Upload" @click="showUploadDialog = true">
          上传文件
        </el-button>
        <el-button :icon="FolderAdd" @click="showCreateFolderDialog = true">
          新建文件夹
        </el-button>
        <el-button :icon="Download" :disabled="!selectedFiles.length" @click="handleBatchDownload">
          下载
        </el-button>
        <el-button :icon="Delete" :disabled="!selectedFiles.length" @click="handleBatchDelete">
          删除
        </el-button>
      </div>
      <div class="toolbar-right">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索文件"
          :prefix-icon="Search"
          clearable
          style="width: 250px"
          @input="handleSearch"
        />
      </div>
    </div>

    <!-- 文件列表 -->
    <el-table
      ref="fileTableRef"
      :data="filteredFiles"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      :empty-text="emptyText"
      class="file-table"
    >
      <el-table-column type="selection" width="55" />

      <el-table-column label="文件名" min-width="300">
        <template #default="{ row }">
          <div class="file-name-cell">
            <el-icon :size="20" :color="getFileIconColor(row.type)">
              <component :is="getFileIcon(row.type)" />
            </el-icon>
            <span
              class="file-name"
              @click="handleFileClick(row)"
              :class="{ 'is-folder': row.type === 'folder' }"
            >
              {{ row.name }}
            </span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="大小" width="120">
        <template #default="{ row }">
          {{ row.type === 'folder' ? '-' : formatFileSize(row.size) }}
        </template>
      </el-table-column>

      <el-table-column label="类型" width="120">
        <template #default="{ row }">
          {{ getFileTypeText(row.type) }}
        </template>
      </el-table-column>

      <el-table-column label="修改时间" width="180">
        <template #default="{ row }">
          {{ formatTime(row.updated_at) }}
        </template>
      </el-table-column>

      <el-table-column label="状态" width="100">
        <template #default="{ row }">
          <el-tag v-if="row.status === 'synced'" type="success" size="small">已同步</el-tag>
          <el-tag v-else-if="row.status === 'syncing'" type="warning" size="small">同步中</el-tag>
          <el-tag v-else type="info" size="small">未同步</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="280" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleDownload(row)" v-if="row.type !== 'folder'">
            下载
          </el-button>
          <el-button link type="primary" @click="handleShare(row)">分享</el-button>
          <el-button link type="primary" @click="handleMove(row)">移动</el-button>
          <el-button link type="primary" @click="handleRename(row)">重命名</el-button>
          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalFiles"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>

    <!-- 上传对话框 -->
    <el-dialog
      v-model="showUploadDialog"
      title="上传文件"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-upload
        ref="uploadRef"
        drag
        multiple
        :action="uploadUrl"
        :headers="uploadHeaders"
        :data="uploadData"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        :on-progress="handleUploadProgress"
        :file-list="fileList"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            支持批量上传，单个文件不超过 500MB
          </div>
        </template>
      </el-upload>
    </el-dialog>

    <!-- 新建文件夹对话框 -->
    <el-dialog
      v-model="showCreateFolderDialog"
      title="新建文件夹"
      width="400px"
    >
      <el-form :model="folderForm" :rules="folderRules" ref="folderFormRef">
        <el-form-item label="文件夹名称" prop="name">
          <el-input
            v-model="folderForm.name"
            placeholder="请输入文件夹名称"
            @keyup.enter="handleCreateFolder"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreateFolderDialog = false">取消</el-button>
        <el-button type="primary" @click="handleCreateFolder">确定</el-button>
      </template>
    </el-dialog>

    <!-- 重命名对话框 -->
    <el-dialog
      v-model="showRenameDialog"
      title="重命名"
      width="400px"
    >
      <el-form :model="renameForm" :rules="renameRules" ref="renameFormRef">
        <el-form-item label="新名称" prop="name">
          <el-input
            v-model="renameForm.name"
            placeholder="请输入新名称"
            @keyup.enter="handleRenameConfirm"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showRenameDialog = false">取消</el-button>
        <el-button type="primary" @click="handleRenameConfirm">确定</el-button>
      </template>
    </el-dialog>

    <!-- 移动文件对话框 -->
    <el-dialog
      v-model="showMoveDialog"
      title="移动文件"
      width="500px"
    >
      <div class="move-content">
        <div class="move-info">
          <span class="move-label">移动文件：</span>
          <span class="move-file-name">{{ moveForm.fileName }}</span>
        </div>
        <div class="folder-tree-container">
          <div class="folder-breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                <a @click="navigateMoveFolder(0, [])">
                  <el-icon><Folder /></el-icon>
                  根目录
                </a>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item, index) in moveFolderPath" :key="index">
                <a @click="navigateMoveFolder(item.id, moveFolderPath.slice(0, index + 1))">
                  {{ item.name }}
                </a>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="folder-list" v-loading="loadingFolders">
            <div 
              v-for="folder in moveFolders" 
              :key="folder.id"
              class="folder-item"
              :class="{ 'selected': moveForm.targetParentId === folder.id }"
              @click="selectMoveFolder(folder)"
              @dblclick="navigateMoveFolder(folder.id, [...moveFolderPath, { id: folder.id, name: folder.name }])"
            >
              <el-icon :size="20"><Folder /></el-icon>
              <span>{{ folder.name }}</span>
            </div>
            <div v-if="moveFolders.length === 0" class="empty-folders">
              当前目录下没有文件夹
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="showMoveDialog = false">取消</el-button>
        <el-button type="primary" @click="handleMoveConfirm" :disabled="moveForm.targetParentId === null">移动到此处</el-button>
      </template>
    </el-dialog>

    <!-- 分享对话框 -->
    <el-dialog
      v-model="showShareDialog"
      title="分享文件"
      width="500px"
    >
      <div class="share-content">
        <el-form :model="shareForm" label-width="100px">
          <el-form-item label="分享链接">
            <el-input v-model="shareLink" readonly>
              <template #append>
                <el-button @click="handleCopyLink">复制</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="有效期">
            <el-select v-model="shareForm.expiry" placeholder="请选择">
              <el-option label="1天" value="1" />
              <el-option label="7天" value="7" />
              <el-option label="30天" value="30" />
              <el-option label="永久" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="访问密码">
            <el-input v-model="shareForm.password" placeholder="可选，留空则无需密码" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="showShareDialog = false">关闭</el-button>
        <el-button type="primary" @click="handleCreateShare">生成分享</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Upload,
  Download,
  Delete,
  Search,
  FolderAdd,
  Folder,
  Document,
  Picture,
  VideoCamera,
  Headset,
  Files,
  UploadFilled
} from '@element-plus/icons-vue'
import axios from '@/api'

// 数据状态
const loading = ref(false)
const files = ref([])
const selectedFiles = ref([])
const searchKeyword = ref('')
const currentParentId = ref(0) // 使用 parentId 而不是 path
const breadcrumbPath = ref([])

// 分页
const currentPage = ref(1)
const pageSize = ref(20)
const totalFiles = ref(0)

// 对话框状态
const showUploadDialog = ref(false)
const showCreateFolderDialog = ref(false)
const showRenameDialog = ref(false)
const showShareDialog = ref(false)
const showMoveDialog = ref(false)

// 表单数据
const folderForm = reactive({ name: '' })
const renameForm = reactive({ id: '', name: '' })
const shareForm = reactive({ expiry: '7', password: '' })
const moveForm = reactive({ fileId: '', fileName: '', currentParentId: null, targetParentId: null })
const shareLink = ref('')
const fileList = ref([])
const moveFolders = ref([])
const moveFolderPath = ref([])
const loadingFolders = ref(false)

// 表单引用
const fileTableRef = ref()
const folderFormRef = ref()
const renameFormRef = ref()
const uploadRef = ref()

// 表单验证规则
const folderRules = {
  name: [
    { required: true, message: '请输入文件夹名称', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
  ]
}

const renameRules = {
  name: [
    { required: true, message: '请输入新名称', trigger: 'blur' },
    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  ]
}

// 上传配置
const uploadUrl = computed(() => {
  // Use relative path to go through Vite proxy
  return '/api/upload'
})

const uploadHeaders = computed(() => {
  return {
    Authorization: `Bearer ${localStorage.getItem('token')}`
  }
})

const uploadData = computed(() => {
  return {
    parentId: currentParentId.value
  }
})

// 计算属性
const filteredFiles = computed(() => {
  // 首先过滤掉 .Recycle_bin 文件夹
  let filtered = files.value.filter(file => file.name !== '.Recycle_bin')
  
  // 再根据搜索关键词过滤
  if (searchKeyword.value) {
    filtered = filtered.filter(file =>
      file.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }
  
  return filtered
})

const emptyText = computed(() => {
  if (loading.value) return '加载中...'
  if (searchKeyword.value) return '未找到匹配的文件'
  return '暂无文件'
})

// 生命周期
onMounted(() => {
  loadFiles()
})

// 方法
const loadFiles = async () => {
  loading.value = true
  try {
    const response = await axios.get('/api/files', {
      params: {
        parentId: currentParentId.value,
        page: currentPage.value,
        limit: pageSize.value
      },
      headers: {
        'Cache-Control': 'no-cache'
      }
    })

    console.log('API Response:', response.data)

    // 检查响应数据结构
    if (response.data.success === false) {
      ElMessage.error(response.data.message || '加载文件列表失败')
      files.value = []
      totalFiles.value = 0
      return
    }

    // 后端返回格式: { success: true, data: { files: [...], total: 10 } }
    files.value = response.data.data?.files || []
    totalFiles.value = response.data.data?.total || 0

    console.log('Files loaded:', files.value.length, 'Total:', totalFiles.value)
  } catch (error) {
    console.error('加载文件列表失败:', error)
    ElMessage.error('加载文件列表失败')
    files.value = []
    totalFiles.value = 0
  } finally {
    loading.value = false
  }
}

const handleSelectionChange = (selection) => {
  selectedFiles.value = selection
}

const handleSearch = () => {
  // 搜索逻辑已在 filteredFiles 计算属性中实现
}

const handleFileClick = (file) => {
  if (file.type === 'folder') {
    currentParentId.value = file.id
    breadcrumbPath.value.push({ id: file.id, name: file.name })
    currentPage.value = 1 // 重置到第一页
    loadFiles()
  }
}

const navigateToRoot = () => {
  currentParentId.value = 0
  breadcrumbPath.value = []
  currentPage.value = 1
  loadFiles()
}

const navigateToBreadcrumb = (index) => {
  if (index < breadcrumbPath.value.length - 1) {
    const item = breadcrumbPath.value[index]
    currentParentId.value = item.id
    breadcrumbPath.value = breadcrumbPath.value.slice(0, index + 1)
    currentPage.value = 1
    loadFiles()
  }
}

const handleDownload = async (file) => {
  try {
    const response = await axios.get(`/api/files/download/${file.id}`, {
      responseType: 'blob'
    })
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', file.name)
    document.body.appendChild(link)
    link.click()
    link.remove()
    window.URL.revokeObjectURL(url)
    ElMessage.success('下载成功')
  } catch (error) {
    console.error('下载失败:', error)
    ElMessage.error('下载失败')
  }
}

const handleBatchDownload = async () => {
  if (selectedFiles.value.length === 0) {
    ElMessage.warning('请选择要下载的文件或文件夹')
    return
  }

  // 统计选中的项目
  const fileCount = selectedFiles.value.filter(f => f.type !== 'folder').length
  const folderCount = selectedFiles.value.filter(f => f.type === 'folder').length
  
  let message = '正在打包'
  if (fileCount > 0 && folderCount > 0) {
    message += ` ${fileCount} 个文件和 ${folderCount} 个文件夹`
  } else if (fileCount > 0) {
    message += ` ${fileCount} 个文件`
  } else {
    message += ` ${folderCount} 个文件夹`
  }

  // 创建带动画省略号的消息
  const loadingMsg = ElMessage({
    message: `<span>${message}<span class="loading-dots"><span>.</span><span>.</span><span>.</span></span></span>`,
    type: 'info',
    duration: 0, // 不自动关闭
    dangerouslyUseHTMLString: true,
    customClass: 'batch-download-loading'
  })

  try {
    const fileIds = selectedFiles.value.map(f => f.id)
    console.log('=== 批量下载调试信息 ===')
    console.log('选中文件数量:', selectedFiles.value.length)
    console.log('选中的文件:', selectedFiles.value.map(f => `${f.name} (ID: ${f.id}, 类型: ${f.type})`))
    console.log('发送的fileIds:', fileIds)
    console.log('====================')
    
    const response = await axios.post('/api/files/batch-download', 
      { fileIds },
      { 
        responseType: 'blob',
        timeout: 600000 // 10分钟超时（支持大文件夹）
      }
    )
    
    // 创建下载链接
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    
    // 从响应头获取文件名，或使用默认名称
    const contentDisposition = response.headers['content-disposition']
    let fileName = `files_${Date.now()}.zip`
    if (contentDisposition) {
      const fileNameMatch = contentDisposition.match(/filename\*=UTF-8''(.+)/)
      if (fileNameMatch && fileNameMatch[1]) {
        fileName = decodeURIComponent(fileNameMatch[1])
      }
    }
    
    link.setAttribute('download', fileName)
    document.body.appendChild(link)
    link.click()
    link.remove()
    window.URL.revokeObjectURL(url)
    
    // 关闭加载提示
    loadingMsg.close()
    
    // 显示成功提示
    ElMessage.success('打包下载成功')
  } catch (error) {
    console.error('批量下载失败:', error)
    
    // 关闭加载提示
    loadingMsg.close()
    
    // 显示错误提示
    ElMessage.error(error.response?.data?.message || '批量下载失败')
  }
}

const handleDelete = async (file) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除 "${file.name}" 吗？`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await axios.delete(`/api/files/${file.id}`)
    ElMessage.success('删除成功')
    loadFiles()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

const handleBatchDelete = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedFiles.value.length} 个文件吗？`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const ids = selectedFiles.value.map(f => f.id)
    await axios.post('/api/files/batch-delete', { ids })
    ElMessage.success('删除成功')
    loadFiles()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

const handleRename = (file) => {
  renameForm.id = file.id
  renameForm.name = file.name
  showRenameDialog.value = true
}

const handleRenameConfirm = async () => {
  if (!renameFormRef.value) return

  await renameFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await axios.put(`/api/files/${renameForm.id}/rename`, {
          newName: renameForm.name
        })
        ElMessage.success('重命名成功')
        showRenameDialog.value = false
        loadFiles()
      } catch (error) {
        console.error('重命名失败:', error)
        ElMessage.error(error.response?.data?.message || '重命名失败')
      }
    }
  })
}

const handleMove = async (file) => {
  moveForm.fileId = file.id
  moveForm.fileName = file.name
  moveForm.currentParentId = currentParentId.value
  moveForm.targetParentId = null
  moveFolderPath.value = []
  showMoveDialog.value = true
  // 加载根目录的文件夹
  await loadMoveFolders(0)
}

const loadMoveFolders = async (parentId) => {
  loadingFolders.value = true
  try {
    const response = await axios.get('/api/files', {
      params: {
        parentId: parentId,
        page: 1,
        limit: 1000 // 获取所有文件夹
      }
    })
    // 只显示文件夹，并排除当前文件
    moveFolders.value = (response.data.data?.files || [])
      .filter(f => f.type === 'folder' && f.id !== moveForm.fileId)
  } catch (error) {
    console.error('加载文件夹失败:', error)
    ElMessage.error('加载文件夹失败')
    moveFolders.value = []
  } finally {
    loadingFolders.value = false
  }
}

const navigateMoveFolder = async (folderId, path) => {
  moveFolderPath.value = path
  moveForm.targetParentId = folderId
  await loadMoveFolders(folderId)
}

const selectMoveFolder = (folder) => {
  moveForm.targetParentId = folder.id
}

const handleMoveConfirm = async () => {
  if (moveForm.targetParentId === null) {
    ElMessage.warning('请选择目标文件夹')
    return
  }

  if (moveForm.targetParentId === moveForm.currentParentId) {
    ElMessage.warning('目标位置与当前位置相同')
    return
  }

  try {
    await axios.post(`/api/files/${moveForm.fileId}/move`, {
      targetParentId: moveForm.targetParentId
    })
    ElMessage.success('移动成功')
    showMoveDialog.value = false
    loadFiles()
  } catch (error) {
    console.error('移动失败:', error)
    ElMessage.error(error.response?.data?.message || '移动失败')
  }
}

const handleShare = (file) => {
  shareForm.expiry = '7'
  shareForm.password = ''
  shareLink.value = ''
  showShareDialog.value = true
  // 存储当前要分享的文件
  shareForm.fileId = file.id
}

const handleCreateShare = async () => {
  try {
    const response = await axios.post('/api/files/share', {
      file_id: shareForm.fileId,
      expiry_days: shareForm.expiry,
      password: shareForm.password
    })
    shareLink.value = response.data.link
    ElMessage.success('分享链接已生成')
  } catch (error) {
    console.error('生成分享链接失败:', error)
    ElMessage.error('生成分享链接失败')
  }
}

const handleCopyLink = () => {
  navigator.clipboard.writeText(shareLink.value)
  ElMessage.success('链接已复制到剪贴板')
}

const handleCreateFolder = async () => {
  if (!folderFormRef.value) return

  await folderFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await axios.post('/api/files/folder', {
          name: folderForm.name,
          parentId: currentParentId.value
        })
        ElMessage.success('创建成功')
        showCreateFolderDialog.value = false
        folderForm.name = ''
        loadFiles()
      } catch (error) {
        console.error('创建文件夹失败:', error)
        ElMessage.error(error.response?.data?.message || '创建文件夹失败')
      }
    }
  })
}

const handleUploadSuccess = (response, file) => {
  ElMessage.success(`${file.name} 上传成功`)
  loadFiles()
}

const handleUploadError = (error, file) => {
  console.error('上传失败:', error)
  ElMessage.error(`${file.name} 上传失败`)
}

const handleUploadProgress = (event, file) => {
  // 可以在这里更新上传进度
}

const handleSizeChange = (val) => {
  pageSize.value = val
  loadFiles()
}

const handlePageChange = (val) => {
  currentPage.value = val
  loadFiles()
}

// 工具函数
const getFileIcon = (type) => {
  const iconMap = {
    folder: Folder,
    image: Picture,
    video: VideoCamera,
    audio: Headset,
    document: Document
  }
  return iconMap[type] || Files
}

const getFileIconColor = (type) => {
  const colorMap = {
    folder: '#409eff',
    image: '#67c23a',
    video: '#e6a23c',
    audio: '#f56c6c',
    document: '#909399'
  }
  return colorMap[type] || '#909399'
}

const getFileTypeText = (type) => {
  const typeMap = {
    folder: '文件夹',
    image: '图片',
    video: '视频',
    audio: '音频',
    document: '文档',
    archive: '压缩包',
    code: '代码'
  }
  return typeMap[type] || '文件'
}

const formatFileSize = (bytes) => {
  if (!bytes) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
}

const formatTime = (time) => {
  if (!time) return '-'
  const date = new Date(time)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hour}:${minute}`
}
</script>

<style scoped>
.files-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: calc(100vh - 60px);
}

.breadcrumb {
  background: white;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.breadcrumb a {
  color: #409eff;
  cursor: pointer;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.toolbar {
  background: white;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toolbar-left {
  display: flex;
  gap: 8px;
}

.toolbar-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.file-table {
  background: white;
  border-radius: 8px;
}

.file-table :deep(.el-table__header) {
  background: #fafafa;
}

.file-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-name {
  cursor: default;
  color: #333;
}

.file-name.is-folder {
  color: #409eff;
  cursor: pointer;
}

.file-name.is-folder:hover {
  text-decoration: underline;
}

.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  background: white;
  padding: 16px 20px;
  border-radius: 8px;
}

.share-content {
  padding: 0 20px;
}

.el-icon--upload {
  font-size: 67px;
  color: #c0c4cc;
  margin: 40px 0 16px;
  line-height: 50px;
}

.el-upload__text {
  color: #606266;
  font-size: 14px;
  text-align: center;
}

.el-upload__text em {
  color: #409eff;
  font-style: normal;
}

.move-content {
  padding: 0 20px;
}

.move-info {
  margin-bottom: 16px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 4px;
}

.move-label {
  color: #606266;
  font-weight: 500;
}

.move-file-name {
  color: #409eff;
  margin-left: 8px;
}

.folder-tree-container {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.folder-breadcrumb {
  padding: 12px;
  background: #fafafa;
  border-bottom: 1px solid #dcdfe6;
}

.folder-breadcrumb a {
  color: #409eff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.folder-breadcrumb a:hover {
  text-decoration: underline;
}

.folder-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}

.folder-item {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.folder-item:hover {
  background: #f5f7fa;
}

.folder-item.selected {
  background: #e6f7ff;
  color: #409eff;
  border: 1px solid #409eff;
}

.empty-folders {
  padding: 40px;
  text-align: center;
  color: #909399;
}

/* 批量下载加载动画 */
.batch-download-loading .loading-dots {
  display: inline-block;
  margin-left: 2px;
}

.batch-download-loading .loading-dots span {
  animation: loading-dot 1.4s infinite;
  display: inline-block;
}

.batch-download-loading .loading-dots span:nth-child(1) {
  animation-delay: 0s;
}

.batch-download-loading .loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.batch-download-loading .loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loading-dot {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  30% {
    opacity: 1;
    transform: scale(1.2);
  }
}
</style>
